<template>
    <div>v-text和v-html两者的区别？</div>
    <p v-text="str"></p> <!--v-text 是包含html标签的 和文本插值也一样输出的是纯文本-->
    <p v-html="str"></p>
    <hr>
    <div>
        <span>年龄：</span>
        <input type="text" v-model.number="age"> {{ age }} <br>
        <span>个人名言：</span>
        <input type="text" v-model.trim="instr"> {{ instr }} <br>
        <span>自我介绍：</span>
        <textarea v-model.lazy="itor"></textarea>
    </div><br>
    <span>姓名：</span>
    <input type="text" v-model="username"> {{ username }} <br>
    <span>密码：</span>
    <input type="text" v-model="pwd"> {{ pwd }}<br>
    <div>
        <span>家乡地址：</span> {{ from }}
        <select v-model="from">
            <option value="北京">北京</option>
            <option value="河南">河南</option>
            <option value="郑州">郑州</option>
            <option value="道口">道口</option>
        </select>
    </div>
    <!--多选操作
    如果是多选或重复选择 关注点在 复选框是否是关联关系
    -->
    <div>
        <span>兴趣爱好：</span> {{ hobby }}
        <input type="checkbox" value="篮球" v-model="hobby"> 篮球
        <input type="checkbox" value="吃喝" v-model="hobby"> 吃喝
        <input type="checkbox" value="玩乐" v-model="hobby"> 玩乐
        <input type="checkbox" value="看动漫" v-model="hobby"> 看动漫
        <input type="checkbox" value="敲代码" v-model="hobby"> 敲代码

    </div>
    <span>性别：</span> {{ sex }}
    <input type="radio" value="男" v-model="sex"> 男
    <input type="radio" value="女" v-model="sex"> 女 <br>
    <span>个人名言：</span>
    <textarea v-model="instr"></textarea><br>
    {{ instr }}

</template>
<script>
export default {
    data() {
        return {
            /** mvvm 设计模式
             * v-model 双向绑定数据源
             * 语法：v-model='数据变量'
             * 备注：双向绑定数据源，数据变化时（data），视图会更新(view DOM标签)；反之亦然。
             */
            username: '王林2',
            pwd: '1234567',
            from: '郑州',
            hobby: [],
            sex: '',
            instr: '',
            age: 0,
            itor: '',
            str:"<span>哈哈哈</span>"
        }
    }
}
</script>